<template>
	<view class="hot-list-box">
		<view class="hot-list-title">
			热门服务
		</view>
		<view class="hot-grid">
			<block v-for="item1 in displayList" :key="item1.id">
				<view class="goods-item" @click="goPage(`/pages/goods/index?id=${item1.id}`)">
					<view class="image-wrap flex justify-center">
						<u-image style="width: 100%;height: 100%;" :src="item1.image" width="100%"
							height="100%"></u-image>
					</view>
					<view class="goods-item--text">
						<view class="goods-title truncate mt-[20rpx] mb-[14rpx]">
							{{ item1.name }}
						</view>
						<view class="goods-price">
							100.00
							<text>元起</text>
						</view>
						<view class="goods-buy">
							立即抢购
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue';

	const props = defineProps({
		lists: {
			type: Array,
			default: []
		}
	})

	const displayList = computed(() => {
		return props.lists.slice(0, 4)
	})

	const goPage = (url : string) => {
		uni.navigateTo({ url: url })
	}
</script>

<style lang="scss" scoped>
	// 商品列表
	.hot-list-box {
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0 24rpx;

		.hot-list-title {
			width: 170rpx;
			height: 100rpx;
			line-height: 76rpx;
			color: #3B84D3;
			font-size: 26rpx;
			position: relative;
			text-align: center;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 21rpx;
				width: 110rpx;
				height: 3rpx;
				background: #3B84D3;
			}
		}
	}

	.hot-grid {
		display: grid;
		grid-template-columns: 341rpx 341rpx;
		grid-auto-rows: 435.43rpx 435.43rpx;
		gap: 20rpx;
		justify-content: center;
	}

	.goods-item {
		width: 100%;
		height: 100%;
		background-color: white;
		border-radius: 20rpx;
		min-width: 0;
		min-height: 0;
		box-sizing: border-box;
		padding: 10rpx 10rpx 30rpx 10rpx;
		position: relative;

		.image-wrap {
			width: 321rpx;
			height: 293rpx;
			border-radius: 20rpx;
			overflow: hidden;

			&>* {
				width: 100%;
				height: 100%;
			}
		}

		&--text {
			// line-1
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			.goods-title {
				// width: 180rpx;
				font-weight: 500;
				color: #303133;
				font-size: 24rpx;
			}

			.goods-price {
				position: absolute;
				left: 10rpx;
				bottom: 30rpx;
				color: #FF2505;
				font-size: 28rpx;
				font-weight: Bold;
				vertical-align: bottom;

				text {
					font-weight: normal;
					color: #303133;
					font-size: 20rpx;
				}
			}

			.goods-buy {
				position: absolute;
				right: 10rpx;
				bottom: 31rpx;
				width: 128rpx;
				height: 41rpx;
				background: #FEBD23;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 10rpx 21rpx;
				box-sizing: border-box;
				color: #FFFFFF;
				font-size: 22rpx;
				line-height: 1;
			}
		}
	}
</style>